
<template>
  <ScrollContainer :style="{ height: scrollerHeight }" ref="wrapperRef">
    <div
      class="diy-form-widget-container"
      :class="[terminalType + '-layout-container']"
    >
      <Form ref="formRef"
        :label-col="labelCol"
        :layout="designer.globalConfig.layoutType"
        :wrapper-col="wrapperCol"
        class="full-height-width widget-form"
        :class="[terminalType + '-layout']"
        :style="{ minHeight: formHeight }"
      >
        <template v-if="designer.widgetList.length === 0">
          <div class="no-widget-hint">请从左侧列表中选择一个组件, 然后用鼠标拖动组件放置于此处</div>
        </template>

        <Draggable 
          :list="designer.widgetList" 
          item-key="id"
          v-bind="{group: 'dragGroup', ghostClass: 'ghost',animation: 300}"
          :component-data="{name: 'fade'}"
          handle=".drag-handler" 
          @end="onDragEnd" @add="onDragAdd" @update="onDragUpdate" :move="checkMove"
        >
          <template #item="{ element: widget, index }">
            <div class="transition-group-el">
              <component :is="getWidgetComp(widget)" 
                :widget="widget" :designer="designer" :key="widget.id"
                :parentList="designer.widgetList" :indexOfParentList="index"
              />
            </div>
          </template>
        </Draggable>

      </Form>
    </div>
      
  </ScrollContainer>

</template>
<script lang="ts" name="diy-form-designer" setup>
import { ref, computed, onMounted, nextTick, Ref, inject } from 'vue';
import Draggable from "vuedraggable";
import { Form } from 'ant-design-vue'
import type { CSSProperties } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { Icon } from '/@/components/Icon';
import { ScrollContainer } from '/@/components/Container';
import { propTypes } from '/@/utils/propTypes';
import type { Designer } from '../type'
// 容器组件 + 字段组件
import FieldComponents from '../form-widget/field-widget/index'
import ContainerComponents from '../form-widget/container-widget'
const { createMessage } = useMessage()
// const designerConfig = inject('designerConfig')

const stats = ref({
  
})
const props = defineProps({
  scrollerHeight: { type: Number },
  designer: { type: Object as () => Designer}
})
const designer = props.designer as Designer
const terminalType = computed(() => designer.terminalType)

const scrollerHeight = computed(() => ((props.scrollerHeight || 800)) + 'px')
const formHeight = computed(() => ((props.scrollerHeight || 800) - 20) + 'px')
const labelCol = computed(() => (designer.globalConfig.labelCol || {}))
const wrapperCol = computed(() => (designer.globalConfig.wrapperCol || {}))

onMounted(() => {
  
})


const onDragEnd = (evt)  =>{
 
}
const getWidgetComp = (widget) => {
  return FieldComponents[widget.type + '-widget'] || ContainerComponents[widget.type + '-widget']
}


const onDragAdd = (evt) => {
  const newIndex = evt.newIndex
  // if (!!this.designer.widgetList[newIndex]) {
  //   this.designer.setSelected( this.designer.widgetList[newIndex] )
  // }

  // this.designer.emitHistoryChange()
}

const onDragUpdate = () => { 
  // this.designer.emitHistoryChange()
}

const checkMove = (evt) => { 
  // return this.designer.checkWidgetMove(evt)
}

</script>

<style lang="less" scoped>
@import '../index.less';

.pc-layout-container,
.pad-layout-container,
.h5-layout-container {
  padding: 10px !important;
  margin-left: 50px !important;
  margin-right: 50px !important;
}
.diy-form-widget-container {
  // padding: 5px;
  background: #f1f2f3;
  height: 100% !important;
  overflow-x: hidden;
  overflow-y: auto;
  margin: auto 0;

  .full-height-width {
    height: 100% !important;
    // padding: 3px;
    background: #ffffff;
  }
  .no-widget-hint {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    color: #999999;
  }

  .form-widget-list {
    min-height: calc(100vh - 56px - 68px);
    padding: 3px;
  }

  .pc-layout {
    position: relative;
    margin: 0 auto;
    // min-width: 1000px !important;
    border-radius: 10px;
  }

  .pad-layout {
    position: relative;
    margin: 0 auto;
    max-width: 960px;
    border-radius: 10px;
    box-shadow: 0 0 1px 10px #495060;
  }

  .h5-layout {
    position: relative;
    margin: 0 auto;
    width: 420px;
    border-radius: 10px;
    //border-width: 10px;
    box-shadow: 0 0 1px 10px #495060;
  }

  .ant-form {
    height: 100% !important;
  }
  .widget-form {
    padding: 3px;
    border: 1px dashed rgba(170, 170, 170, 0.75);
  }

}

.grid-cell {
  min-height: 30px;
  border-right: 1px dotted #cccccc;

}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
